Motion >> Repos - motion-next.git/blob

   1 <md-dialog class="agent-dialog" aria-label="agent dispose">
   2   <form name="disposition" class="md-inline-form" novalidate>
   3     <md-toolbar class="md-background-bg">
   4       <div
   5         class="md-toolbar-tools"
   6         layout="row"
   7         layout-align="space-between center"
   8       >
   9         <span class="title" translate="DASHBOARDS.DISPOSE"></span>
  10         <md-button
  11           class="md-icon-button"
  12           ng-click="vm.closeDialog()"
  13           ng-if="!vm.call.mandatoryDisposition"
  14         >
  15           <md-icon
  16             md-font-icon="icon-close"
  17             aria-label="Close dialog"
  18           ></md-icon>
  19         </md-button>
  20       </div>
  21     </md-toolbar>
  22     <md-dialog-content ms-scroll>
  23       <div ng-if="!vm.isReschedule">
  24         <md-input-container class="md-block">
  25           <label translate="DASHBOARDS.DISPOSITION">Disposition</label>
  26           <md-select
  27             name="disposition"
  28             ng-model="vm.firstLevelDisposition"
  29             ng-change="vm.onDispositionChange('first')"
  30             required
  31           >
  32             <md-option
  33               ng-value="disposition"
  34               ng-repeat="disposition in vm.dispositions | filter: { level: 'first' }"
  35             >
  36               {{ disposition.name }}</md-option
  37             >
  38             <md-option
  39               ng-value="globalDisposition"
  40               ng-repeat="globalDisposition in vm.globalDispositions | filter: { level: 'first' }"
  41             >
  42               {{ globalDisposition.name }}</md-option
  43             >
  44           </md-select>
  45           <div
  46             ng-messages="dispositionForm.disposition.$error"
  47             ng-show="dispositionForm.disposition.$touched"
  48             role="alert"
  49           >
  50             <div ng-message="required">
  51               <span translate="DASHBOARDS.ERRORS.DISPOSITION_REQUIRED"
  52                 >Disposition field is required</span
  53               >
  54             </div>
  55           </div>
  56         </md-input-container>
  57         <div
  58           ng-if="vm.firstLevelDisposition && vm.anySecondLevelDisposition"
  59           layout="row"
  60           layout-align="start center"
  61         >
  62           <md-input-container class="md-block" flex>
  63             <label translate="DASHBOARDS.SECOND_LEVEL_DISPOSITION"
  64               >Second Level Disposition</label
  65             >
  66             <md-select
  67               name="secondLevelDisposition"
  68               ng-model="vm.secondLevelDisposition"
  69               ng-change="vm.onDispositionChange('second')"
  70             >
  71               <md-option
  72                 ng-value="disposition"
  73                 ng-repeat="disposition in vm.dispositions | filter: { level: 'second', ParentId: vm.firstLevelDisposition.id }"
  74               >
  75                 {{ disposition.name }}</md-option
  76               >
  77               <md-option
  78                 ng-value="globalDisposition"
  79                 ng-repeat="globalDisposition in vm.globalDispositions | filter: { level: 'second', ParentId: vm.firstLevelDisposition.id }"
  80               >
  81                 {{ globalDisposition.name }}</md-option
  82               >
  83             </md-select>
  84           </md-input-container>
  85           <md-button
  86             ng-if="vm.secondLevelDisposition"
  87             ng-click="vm.clearDispositionSelection('second')"
  88             class="md-icon-button"
  89           >
  90             <md-icon
  91               md-font-icon="icon-cancel"
  92               aria-label="Clear second level disposition selection"
  93             >
  94             </md-icon>
  95           </md-button>
  96         </div>
  97         <div
  98           ng-if="vm.secondLevelDisposition && vm.anyThirdLevelDisposition"
  99           layout="row"
 100           layout-align="start center"
 101         >
 102           <md-input-container class="md-block" flex>
 103             <label translate="DASHBOARDS.THIRD_LEVEL_DISPOSITION"
 104               >Third Level Disposition</label
 105             >
 106             <md-select
 107               name="thirdLevelDisposition"
 108               ng-model="vm.thirdLevelDisposition"
 109               ng-change="vm.onDispositionChange('third')"
 110             >
 111               <md-option
 112                 ng-value="disposition"
 113                 ng-repeat="disposition in vm.dispositions | filter: { level: 'third', ParentId: vm.secondLevelDisposition.id }"
 114               >
 115                 {{ disposition.name }}</md-option
 116               >
 117               <md-option
 118                 ng-value="globalDisposition"
 119                 ng-repeat="globalDisposition in vm.globalDispositions | filter: { level: 'third', ParentId: vm.secondLevelDisposition.id }"
 120               >
 121                 {{ globalDisposition.name }}</md-option
 122               >
 123             </md-select>
 124           </md-input-container>
 125           <md-button
 126             ng-if="vm.thirdLevelDisposition"
 127             ng-click="vm.clearDispositionSelection('third')"
 128             class="md-icon-button"
 129           >
 130             <md-icon
 131               md-font-icon="icon-cancel"
 132               aria-label="Clear third level disposition selection"
 133             >
 134             </md-icon>
 135           </md-button>
 136         </div>
 137         <md-input-container class="md-block">
 138           <label translate="DASHBOARDS.NOTE">Note</label>
 139           <textarea
 140             ng-model="vm.note"
 141             md-maxlength="255"
 142             max-rows="5"
 143             autofocus
 144           ></textarea>
 145         </md-input-container>
 146       </div>
 147       <div ng-if="vm.isReschedule">
 148         <div layout="row">
 149           <div flex class="md-block">
 150             <mdp-date-picker
 151               mdp-open-on-click
 152               required
 153               name="date"
 154               mdp-placeholder="Date"
 155               mdp-format="YYYY-MM-DD"
 156               mdp-min-date="vm.hopper.minDate"
 157               ng-model="vm.hopper.dateTime"
 158             >
 159               <div
 160                 ng-messages="disposition.date.$error"
 161                 ng-show="disposition.date.$touched"
 162                 role="alert"
 163               >
 164                 <div ng-message="required">
 165                   <span translate="DASHBOARDS.ERRORS.DATE_REQUIRED"
 166                     >Date is required</span
 167                   >
 168                 </div>
 169                 <div ng-message="format">
 170                   <span translate="DASHBOARDS.ERRORS.DATE_INVALID"
 171                     >Date is invalid</span
 172                   >
 173                 </div>
 174               </div>
 175             </mdp-date-picker>
 176           </div>
 177
 178           <div flex class="md-block">
 179             <mdp-time-picker
 180               mdp-open-on-click
 181               required
 182               name="time"
 183               mdp-placeholder="Time"
 184               mdp-format="HH:mm:ss"
 185               mdp-auto-switch="true"
 186               ng-model="vm.hopper.dateTime"
 187             >
 188               <div
 189                 ng-messages="disposition.time.$error"
 190                 ng-show="disposition.time.$touched"
 191                 role="alert"
 192               >
 193                 <div ng-message="required">
 194                   <span translate="DASHBOARDS.ERRORS.TIME_REQUIRED"
 195                     >Time is required</span
 196                   >
 197                 </div>
 198                 <div ng-message="format">
 199                   <span translate="DASHBOARDS.ERRORS.TIME_INVALID"
 200                     >Time is invalid</span
 201                   >
 202                 </div>
 203               </div>
 204             </mdp-time-picker>
 205           </div>
 206         </div>
 207         <md-input-container ng-if="!vm.dialerCall" class="md-block">
 208           <label translate="DASHBOARDS.CAMPAIGN">Campaign</label>
 209           <md-select name="queueCampaign" ng-model="vm.queueCampaign" required>
 210             <md-option
 211               ng-value="queueCampaign"
 212               ng-repeat="queueCampaign in vm.queueCampaigns.rows"
 213             >
 214               {{ queueCampaign.name }} ({{ queueCampaign.dialActive ? 'Active' :
 215               'Not Active' }})</md-option
 216             >
 217           </md-select>
 218           <div
 219             ng-messages="disposition.queueCampaign.$error"
 220             ng-show="disposition.queueCampaign.$touched"
 221             role="alert"
 222           >
 223             <div ng-message="required">
 224               <span translate="DASHBOARDS.ERRORS.CAMPAIGN_REQUIRED"
 225                 >Campaign field is required</span
 226               >
 227             </div>
 228           </div>
 229         </md-input-container>
 230       </div>
 231     </md-dialog-content>
 232     <md-dialog-actions ng-if="!vm.isReschedule" layout="row">
 233       <md-button
 234         ng-disabled="disposition.$invalid || disposition.$pristine"
 235         class="send-button md-raised md-accent"
 236         ng-click="vm.saveDisposition()"
 237       >
 238         {{(vm.selectedDisposition.name ? 'DASHBOARDS.DISPOSE' :
 239         'DASHBOARDS.SAVE') | translate}}
 240       </md-button>
 241       <md-button
 242         class="send-button md-raised md-primary"
 243         translate="DASHBOARDS.RESCHEDULE"
 244         ng-click="vm.saveDisposition('reschedule')"
 245       >
 246         Reschedule
 247       </md-button>
 248       <md-button
 249         class="send-button md-accent md-raised"
 250         translate="DASHBOARDS.RECALLME"
 251         ng-click="vm.saveDisposition('recallme')"
 252       >
 253         Recall Me
 254       </md-button>
 255       <span flex></span>
 256       <md-button
 257         ng-if="vm.hasBlackLists"
 258         class="md-raised md-warn"
 259         translate="DASHBOARDS.BLACKLIST"
 260         ng-click="vm.saveDisposition('blacklist')"
 261       >
 262         Blacklist
 263       </md-button>
 264     </md-dialog-actions>
 265     <md-dialog-actions
 266       ng-if="vm.isReschedule"
 267       layout="row"
 268       layout-align="space-between center"
 269     >
 270       <div layout="row" layout-align="start center">
 271         <md-button
 272           type="submit"
 273           ng-click="vm.saveReschedule()"
 274           class="send-button md-accent md-raised"
 275           ng-disabled="disposition.$invalid || disposition.$pristine || vm.disable"
 276           aria-label="SAVE"
 277           translate="DASHBOARDS.SAVE"
 278           translate-attr-aria-label="DASHBOARDS.SAVE"
 279         >
 280           SAVE
 281         </md-button>
 282       </div>
 283     </md-dialog-actions>
 284   </form>
 285 </md-dialog>